<template>
	<view class="fui-wrap">
		<fui-form error-position="1" labelColor="#7a7a7a" ref="form" top="0" :model="formData">
			<fui-form-item label="拍照入场" arrow asterisk prop="entry_time">
				<view class="camera" @click="makeCamera">
					<fui-icon name="camera" :size="60"></fui-icon>
				</view>
			</fui-form-item>
			<view class="photo" v-if="formData.photo">
				<image :src="formData.photo" style="width: 500rpx;" mode="widthFix"></image>
			</view>
			<fui-form-item label="入场时间" asterisk prop="entry_time">
				<fui-input readonly :borderBottom="false" :padding="[0]" placeholder="请选择入场时间" v-model="formData.entry_time" @click="showTime"></fui-input>
			</fui-form-item>
			<fui-form-item label="车牌号" arrow asterisk prop="plate_number">
				<fui-input readonly @click="$navigateTo('parking/plate?type=input&plate_number='+formData.plate_number)" :borderBottom="false" :padding="[0]" placeholder="请输入车牌号" v-model="formData.plate_number"></fui-input>
			</fui-form-item>
			<fui-form-item label="入场通道" arrow asterisk prop="barrier_id">
				<fui-input readonly @click="showBarrier=true" :borderBottom="false" :padding="[0]" placeholder="请选择入场通道" :value="formData.barrier_txt"></fui-input>
			</fui-form-item>
			<fui-form-item label="车牌颜色" arrow prop="plate_type">
				<fui-input readonly @click="showPlateType=true" :borderBottom="false" :padding="[0]" placeholder="请选择入场通道" :value="formData.plate_type_txt"></fui-input>
			</fui-form-item>
			<fui-form-item label="备注" prop="remark">
				<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入备注" v-model="formData.remark"></fui-input>
			</fui-form-item>
			<view class="fui-btn__box">
				<fui-button :disabled="disabledButton" text="提交" bold @click="submit"></fui-button>
			</view>
		</fui-form>
		<fui-date-picker v-if="checkTime.value" :show="checkTime.show" type="5" :value="checkTime.value"  @change="changeTime" @cancel="cancelTime"></fui-date-picker>
		<fui-picker :fields ="['title','id']" :layer="1" :linkage="true" :options="barrier" :show="showBarrier" @change="changePicker" @cancel="cancelPicker"></fui-picker>
		<fui-picker :fields ="['title','id']" :layer="1" :linkage="true" :options="plate_type" :show="showPlateType" @change="changePicker" @cancel="cancelPicker"></fui-picker>
	</view>
</template>

<script>
	import {methods} from '@/utils/core.js';
	import {formatDateTime} from '@/utils/util.js';
	export default {
		data() {
			return {
				barrier:[],
				showBarrier:false,
				plate_type:[],
				showPlateType:false,
				checkTime:{
					show:false,
					value:''
				},
				formData:{
					photo:'',
					entry_time:'',
					plate_number:'',
					barrier_id:'',
					barrier_txt:'',
					plate_type:'blue',
					plate_type_txt:'蓝牌',
					remark:''
				},
				disabledButton:false
			}
		},
		onShow() {
			let plate_number=uni.getStorageSync('plate_number') || '';
			if(plate_number){
				this.formData.plate_number=plate_number;
				this.getPlateType(plate_number);
				uni.setStorageSync('plate_number','');
			}
		},
		onLoad() {
			let entry_time=formatDateTime(new Date());
			this.formData.entry_time=entry_time.slice(0,16);
			this.getBarrier();
		},
		methods: {
			...methods,
			makeCamera:function(){
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'], 
					success: (res) => {
						let file = res.tempFilePaths[0];
						this.$uploadFile(file).then(ts=>{
							let fullurl=ts.fullurl;
							this.$get('parking/records/photo',{url:fullurl},true,true).then(ps=>{
								this.formData.photo=fullurl;
								this.formData.plate_number=ps.plate_number;
								this.formData.plate_type=ps.plate_type;
							});
						});
					},
					fail: (err) => {
					
					}
				});
			},
			submit:function(){
				let rules = [{
					name: "plate_number",
					rule: ["required"],
					msg: ["请输入车牌号"]
				},{
					name: "barrier_id",
					rule: ["required"],
					msg: ["请选择入场通道"]
				}];
				this.disabledButton=true;
				this.$refs.form.validator(this.formData, rules, true).then(res => {
					if (res.isPassed) {
						this.$post('parking/records/entry',this.formData,true,true).then(res=>{
							this.$redirectTo('parking/records/list',1500);
						}).catch(err=>{
							this.disabledButton=false;
						});
					}else{
						this.disabledButton=false;
					}
				}).catch(err => {
					this.disabledButton=false;
				});
			},
			getPlateType:function(plate_number){
				this.$get('parking/records/get-info',{plate_number:plate_number}).then(res=>{
					this.formData.plate_type=res[0];
					this.formData.plate_type_txt=res[1];
				});
			},
			getBarrier:function(){
				this.$get('parking/records/get-info').then(res=>{
					this.barrier=res.barrier;
					this.plate_type=res.plate_type;
					for(let i=0;i<this.barrier.length;i++){
						if(this.barrier[i].barrier_type=='entry'){
							this.formData.barrier_id=this.barrier[i].id;
							this.formData.barrier_txt=this.barrier[i].title;
							break;
						}
					}
				});
			},
			changePicker:function(e){
				if(this.showBarrier){
					this.formData.barrier_id=e.value;
					this.formData.barrier_txt=e.text;
					this.showBarrier=false;
				}
				if(this.showPlateType){
					this.formData.plate_type=e.value;
					this.formData.plate_type_txt=e.text;
					this.showPlateType=false;
				}
			},
			cancelPicker:function(){
				this.showBarrier=false;
				this.showPlateType=false;
			},
			showTime:function(){
				this.checkTime.value=this.formData.entry_time;
				this.checkTime.show=true;
			},
			cancelTime:function(){
				this.checkTime.value='';
				this.checkTime.show=false;
			},
			changeTime:function(e){
				this.formData.entry_time=e.result;
				this.cancelTime();
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-btn__box{
	padding: 20rpx;
}
.camera{
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
.photo{
	text-align: center;
	padding: 10rpx 0;
}
</style>